
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">

<title>Cardview</title>
<link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.4.5.min.css"/>
<link rel="stylesheet" type="text/css" href="css/animsition.min.css"/>
<script src="js/jquery-2.1.4.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery.animsition.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery.mobile-1.4.5.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" src="js/cardview.js"></script>
<script type="text/javascript">
    	   $(document).ready(function() {
   
			  $(".animsition").animsition({
			   
			    inClass               :   'flip-in-x-fr',
			    outClass              :   'flip-out-x-fr',
			    inDuration            :    1500,
			    outDuration           :    800,
			    linkElement           :   '.animsition-link',
			    // e.g. linkElement   :   'a:not([target="_blank"]):not([href^=#])'
			    loading               :    true,
			    loadingParentElement  :   'body', //animsition wrapper element
			    loadingClass          :   'animsition-loading',
			    unSupportCss          : [ 'animation-duration',
			                              '-webkit-animation-duration',
			                              '-o-animation-duration'
			                            ],
			    //"unSupportCss" option allows you to disable the "animsition" in case the css property in the array is not supported by your browser.
			    //The default setting is to disable the "animsition" in a browser that does not support "animation-duration".
			     
			    overlay               :   false,
			     
			    overlayClass          :   'animsition-overlay-slide',
			    overlayParentElement  :   'body'
			  });
			});            
    </script>
<script type="text/javascript">

var deck;
var data = [
	{
		img: 'img/numberOne.jpg',
		title: 'GuoHang',
		text: '星座：射手<br/>今年：22<br/>兴趣：录歌，看电影，画画，钢琴<br/>座右铭：人不能有傲气，但不能无傲骨...<br/>方向：web前端，网页制作，游戏界面设计'
	},
	{
		img: '../imgs/img2.jpg',
		title: 'Card 2',
		text: 'Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.'
	},
	{
		img: '../',
		title: 'Card 3',
		text: 'Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.'
	},
	{
		img: '../imgs/img4.jpg',
		title: 'Card 4',
		text: 'Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.'
	}
//	{
//		img: '../imgs/img5.jpg',
//		title: 'Card 5',
//		text: 'Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.'
//	}	
];

function loaded () {
	deck = new CardView('#wrapper', {
		dataset: data,
		onUpdateContent: function (el, data) {
			el.querySelector('img').src = data.img;
			el.querySelector('h3').innerHTML = data.title;
			el.querySelector('p').innerHTML = data.text;
		}
	});
}

document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);

</script>


<style>
* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

body, html {
	height: 100%;
}

body, ul, li, h1, h2, h3, img, p {
	padding: 0;
	margin: 0;
	border: 0;
	list-style: none;
}

body {
	/* On modern browsers, prevent the whole page to bounce */
	overflow: hidden;
	background-color: #aaa;
	font-size: 12px;
}

#wrapper {
	position: absolute;
	z-index: 1;
	width: 100%;
	max-width: 568px;
	height: 100%;
	max-height: 568px;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	overflow: hidden;

	/* Prevent native touch events on Windows */
	-ms-touch-action: none;

	/* Prevent the callout on tap-hold and text selection */
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;

	/* Prevent elements to be highlighted on tap */
	-webkit-tap-highlight-color: rgba(0,0,0,0);

	/* Prevent text resize on orientation change, useful for web-apps */
	-webkit-text-size-adjust: none;
	-moz-text-size-adjust: none;
	-ms-text-size-adjust: none;
	-o-text-size-adjust: none;
	text-size-adjust: none;
}

#deck {
	position: relative;
	z-index: 10;
	width: 100%;
	height: 100%;

	background-image: url(img/cba.jpg);
}

.card {
	position: absolute;
	width: 100%;
	height: 100%;
	padding: 10px;
	z-index: 10;

	/* Put the scroller into the HW Compositing layer right from the start */
	-webkit-transform: translateZ(0);
	-moz-transform: translateZ(0);
	-ms-transform: translateZ(0);
	-o-transform: translateZ(0);
	transform: translateZ(0);
}

.card div {
	position: relative;
	width: 100%;
	height: 100%;
	border: 2px solid #aaa;
	padding: 20px;
	border-radius: 10px;
	background: #fff;
	background-position: 50% 50%;
	background-size: 95% 95%;
	background-repeat: no-repeat;
	font-size: 1.6em;
	color:#FFF;
	font-family: "楷体";
	background-image: url(img/cb1.jpg);
}

.card img {
	float: left;
	margin: 0 10px 10px 0;
	border: 1px solid #000;
}

.card h3 {
	background-color: #DDD;
	background: rgba(0,0,0,0.3);
	font-family: 'Brush Script Std';
	color: #FFF;
	padding: 8px;
	margin-bottom: 10px;
	text-align: center;
}
.fly{
	text-decoration: none;
	padding: 5px 60px;
	display: block;
	border-radius: 10px;
	margin-top: 80px;
	padding-top: 10px;
	height: 30px;
	text-align: center;
	line-height: 8px;
	background: rgba(0,0,0,0.2);
	font-family: '楷体';
	transition-property: all;
    transition-duration: 0.5s;
}
.fly:hover{
	background: rgba(0,0,0,0.6);
	border: 1px solid #0FF;
}
</style>

</head>
<body onload="loaded()">
<div id="before" data-role = "page">
	   <div id="wrapper">
	   	    <div id="" class="animsition" style="width: 100%;height: 100%;">
	   	    <ul id="deck">	   	    	
				<li class="card"><div>					
					<h3>Title</h3>
					<img src="
		AAAAAElFTkSuQmCC" alt="thumb" width="125" height="125">	
					<p>Text</p>
					<a class="fly" href="com.html"  data-ajax = "false" style="color: #FFF;">返回主页</a>					
				</div></li>
			
				<li class="card"><div>
					<h3>Title</h3>
					<img src="
		AAAAAElFTkSuQmCC" alt="thumb" width="125" height="125">
					<p>Text</p>
					<a class="fly" href="com.html"  data-ajax = "false" style="color: #FFF;">返回主页</a>
				</div></li>
				
				<li class="card"><div>
					<h3>Title</h3>
					<img src="
		AAAAAElFTkSuQmCC" alt="thumb" width="125" height="125">
					<p>Text</p>
					<a class="fly" href="com.html"  data-ajax = "false" style="color: #FFF;">返回主页</a>
				</div></li>
			</ul>
			</div>
		</div>
</div>

</body>
</html>
